@use "../../theme/themeify.scss" as tools;

%time-text {
    color: var(--Colors-Use-Neutral-Text-4-Help-text);

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    flex-shrink: 0;
}
%expand-text {
    color: var(--Colors-Use-Main-Primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    // width: fit-content;
    cursor: pointer;
    &:hover {
        color: var(--Colors-Use-Main-Hover);
    }
    &:focus,
    &:active {
        color: var(--Colors-Use-Main-Pressed);
    }
}
%display-flex-center {
    display: flex;
    align-items: center;
}
%display-column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.log-info {
    color: var(--Colors-Use-Neutral-Text-1-Title);

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}
.log-time {
    @extend %time-text;
}
.md-body {
    @extend %display-column-center;
    gap: 4px;
    .md-heard {
        @extend %time-text;
    }
    .md-content {
        padding: 12px;
        border-radius: 4px;
        border: 1px solid var(--Colors-Use-Neutral-Border);
        background: var(--Colors-Use-Basic-Background);
        max-height: 20vh;
        overflow-y: auto;
    }
    .md-content-expand {
        max-height: 50vh;
    }
    .md-expand-text {
        @extend %expand-text;
    }
}

.file-show {
    @extend %display-column-center;
    gap: 4px;
    .file-card {
        background-color: var(--Colors-Use-Basic-Background);
        border-radius: 4px;
    }
    .file-heard {
        @extend %time-text;
    }
    .file-card-heard {
        border-bottom: 0;
        height: 36px;
        background: var(--Colors-Use-Neutral-Bg);
    }
    .file-card-body {
        gap: 8px;
        display: grid;
        grid-template-rows: 1fr;
        padding: 0 12px;
        transition: grid-template-rows 0.3s ease;
        background-color: var(--Colors-Use-Basic-Background);
    }
    .file-card-body-hidden {
        grid-template-rows: 0fr;
        .file-body {
            padding: 0;
        }
    }
    .file-body {
        overflow: hidden;
        padding: 12px 0;
    }
    .file-card-heard-error {
        padding: 4px 8px;
        border-radius: 4px 4px 0 0;
        background: linear-gradient(
                0deg,
                tools.fetch-color-transparen(var(--Colors-Use-Error-Primary), 20%) 0%,
                tools.fetch-color-transparen(var(--Colors-Use-Error-Primary), 20%) 100%
            ),
            var(--Colors-Use-Basic-Background);
    }
    .file-card-title {
        @extend %display-flex-center;
        gap: 8px;
        .name {
            color: var(--Colors-Use-Neutral-Text-1-Title);
            font-size: 14px;
            font-weight: 400;
        }
    }
    .file-card-extra {
        @extend %display-flex-center;
        gap: 8px;
    }
    .file-status {
        padding: 0px 6px;
        border-radius: 8px;
        border: 1px solid tools.fetch-color-transparen(var(--Colors-Use-Error-Primary), 30%);
        background: var(--Colors-Use-Main-Bg);
        color: var(--Colors-Use-Error-Primary);
    }
    .file-description {
        color: var(--Colors-Use-Neutral-Text-1-Title);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
    }
    .file-path {
        color: var(--Colors-Use-Neutral-Text-1-Title);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px; /* 133.333% */
    }
}

.log-file {
    @extend %display-column-center;
    gap: 4px;
    .log-file-heard {
        @extend %display-flex-center;
        gap: 12px;
        .time {
            @extend %time-text;
        }
    }
    .log-file-card-title {
        @extend %display-flex-center;
        gap: 8px;
        .name {
            color: var(--Colors-Use-Neutral-Text-1-Title);
            font-size: 14px;
            font-weight: 400;

            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
        }
    }

    .log-file-card-extra {
        @extend %display-flex-center;
        gap: 8px;
    }
    .log-file-card {
        background-color: var(--Colors-Use-Basic-Background);
        border-radius: 4px;
        .log-file-card-heard {
            gap: 12px;
            height: 36px;
            background: var(--Colors-Use-Neutral-Bg);
        }
        .log-file-card-heard-no-border-bottom {
            border-bottom-color: transparent;
        }
    }
    .log-file-card-body {
        gap: 8px;
        display: grid;
        grid-template-rows: 1fr;
        padding: 0 12px;
        transition: grid-template-rows 0.3s ease;
        background-color: var(--Colors-Use-Basic-Background);
    }
    .log-file-card-body-hidden {
        grid-template-rows: 0fr;
        .log-file-body {
            padding: 0;
        }
    }
    .log-file-body {
        overflow: hidden;
        padding: 12px 0;
    }
}

.json-body {
    @extend %display-column-center;
    gap: 4px;
    .json-heard {
        @extend %time-text;
    }
    .json-content {
        background-color: var(--Colors-Use-Neutral-Bg);
        border: 1px solid var(--Colors-Use-Neutral-Border);
        border-radius: 4px;
        padding: 12px;
        white-space: pre-wrap;
        font-family: "Courier New, Courier, monospace";
        font-size: 14px;
        line-height: 1.5;
        overflow-x: auto;
        color: var(--Colors-Use-Neutral-Text-1-Title);
    }
}

.editor-body {
    @extend %display-column-center;
    .editor-heard {
        @extend %time-text;
        margin-bottom: 8px;
    }

    .editor-content {
        border: 1px solid var(--Colors-Use-Neutral-Border);
        border-radius: 8px;

        .editor-content-title {
            @extend %display-flex-center;
            justify-content: space-between;
            padding: 10px 16px 10px 20px;
            background-color: var(--Colors-Use-Basic-Background);

            color: var(--Colors-Use-Neutral-Text-1-Title);
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            border-radius: 8px 8px 0px 0px;

            .editor-content-extra {
                @extend %display-flex-center;
                color: var(--Colors-Use-Neutral-Text-1-Title);
                .time {
                    @extend %display-flex-center;
                    gap: 8px;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                }
            }
        }
        .editor {
            height: 100px;
        }
    }
}

.graph-body {
    @extend %display-column-center;
    gap: 4px;
    .graph-heard {
        @extend %time-text;
    }
    .graph-content {
        border: 1px solid var(--Colors-Use-Neutral-Border);
        border-radius: 4px;
        padding: 16px 20px;
        background-color: var(--Colors-Use-Basic-Background);

        .graph-content-title {
            @extend %display-flex-center;
            justify-content: space-between;
            margin-bottom: 8px;

            color: var(--Colors-Use-Neutral-Text-1-Title);
            font-size: 16px;
            font-style: normal;
            font-weight: 600;

            .time {
                @extend %display-flex-center;
                gap: 8px;

                color: var(--Colors-Use-Neutral-Text-1-Title);
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
            }
        }
        .graph-xAxis-list {
            @extend %display-flex-center;
            gap: 8px 20px;
            border-bottom: 1px solid var(--Colors-Use-Neutral-Border);
            padding-bottom: 8px;
            flex-wrap: wrap;
            .graph-xAxis-list-item {
                @extend %display-flex-center;
                gap: 8px;
                color: var(--Colors-Use-Neutral-Text-1-Title);
            }
            .circle {
                width: 12px;
                height: 12px;
                border-radius: 50%;
            }
        }
    }
}

.bar-graph-charts {
    height: 360px;
}
